<template>
  <div class="shop">
    <header-view
      style="position: fixed; top: 0; width: 100%; z-index: 200"
    ></header-view>
    <div class="heading">
      <h3>联系我们</h3>
      <div class="linkHome">
        <span class="linkStyle" @click="toHome">主页</span> /
        <span class="normalFont">联系我们</span>
      </div>
    </div>
    <div class="contact-box">
      <div class="form-box">
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="formEmail"
          style="max-width: 460px"
        >
          <el-form-item label="你的姓名">
            <el-input v-model="formEmail.name" />
          </el-form-item>
          <el-form-item label="你的电话号码">
            <el-input v-model="formEmail.number" />
          </el-form-item>
          <el-form-item label="你的电子邮箱">
            <el-input v-model="formEmail.email" />
          </el-form-item>
          <el-form-item label="你想说的话">
            <el-input v-model="formEmail.message" :rows="5" type="textarea" />
          </el-form-item>
          <el-form-item>
            <a class="btn">提交</a>
          </el-form-item>
        </el-form>
      </div>
      <div class="map-box">
        <div id="container" style="height: 600px"></div>
      </div>
    </div>
  </div>
  <footer-view></footer-view>
</template>

<script>
import AMap from "AMap";
export default {
  data() {
    const self = this;
    return {
      formEmail: { name: "", number: "", email: "", message: "" },
      labelPosition: "top",
      lnglats: [[121.90522, 30.87451]],
    };
  },
  mounted() {
    this.init();
  },
  setup() {},
  methods: {
    toHome() {
      this.$router.push({ path: "/home" });
    },
    init() {
      let map = new AMap.Map("container", {
        center: [121.90522, 30.87451],
        resizeEnable: true,
        zoom: 13,
      });
      //信息窗口实例
      var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
      //遍历生成多个标记点
      for (var i = 0, marker; i < this.lnglats.length; i++) {
        marker = new AMap.Marker({
          position: this.lnglats[i], //不同标记点的经纬度
          map: map,
        });
        marker.content = "我们的实体店铺在这哦！";
        marker.on("click", markerClick);
        marker.emit("click", { target: marker }); //默认初始化不出现信息窗体,打开初始化就出现信息窗体
      }
      function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
      }
      map.setFitView();
    },
  },
};
</script>

<style lang="scss">
.shop {
  background-color: #fff;
  .heading {
    margin: 70px 0 0 0;
  }
  .contact-box {
    margin: 20px 0;
    display: flex;
    .form-box {
      padding: 20px 40px;
      height: 620px;
      width: 960px;
      background-color: #f6fbf6;
      margin: 0 20px 0 0;
    }
    .map-box {
      padding: 10px;
      border: 1px solid #244d4d;
      height: 620px;
      flex: 1;
      .amap-demo {
        height: 620px;
      }
    }
  }
}
</style>
